<script setup lang="ts">
const router = useRouter()
const route = useRoute()
const username = ref()
const sex = ref()
const birthday = ref()
const wxbzzl = ref()
const lnys = ref()
const rglm = ref()
const tywh = ref()
const myq_text = ref()

const columns = ref([{
  key: 'bz',
  label: '八字',
  class: 'bg-[#eedec7] py-2'
}, {
  key: 'nz',
  label: '年柱',
  class: 'bg-[#eedec7] py-2'
//   class: 'italic'
}, {
  key: 'yz',
  label: '月柱',
  class: 'bg-[#eedec7] py-2'
}, {
  key: 'rz',
  label: '日柱',
  class: 'bg-[#eedec7] py-2'
}, {
  key: 'sz',
  label: '时柱',
  class: 'bg-[#eedec7] py-2'
}])

const items = ref([{
  bz:'天干',
  nz: '',
  yz: '',
  rz: '',
  sz: '',
  class: 'bg-[#fcf5e5]'
}, {
  bz: '地支',
  nz: '',
  yz: '',
  rz: '',
  sz: '',
  class: 'bg-[#eedec7]'
}])
const getResult = async() => {
    const oid = route.query.oid;
    if (!oid) {
        router.push('/yunshi')
    }
    const { data: res } = await useFetchPost('/api/Yunshi/yunshiResult', {
        oid: oid,
    });
    // const { data: res } = await useFetchPost('/api/Yunshi/yunshiResult', {
    //     oid: oid,
    // });

    username.value = res.value?.data?.data?.name ?? '未知';
    if (res.value?.data?.data?.gender == '1') {
        sex.value = '男性'
    } else {
        sex.value = '女性'
    }
    birthday.value = res.value?.data?.data?.y+'年'+res.value?.data?.data?.m+'月'+res.value?.data?.data?.d+'日'+res.value?.data?.data?.h+'时';

    //<p>本命属<{$cookies.sx}>，<{$nayin.0.layin}>命。<{$wang.wang}><{$wang.que}>；日主天干为<{$nayin.0.layin}><{$wang.wang}><{$wang.que}><{$cookies.bazi.4}>，生于<{$cookies.siji}>季。</p>
    wxbzzl.value = '本命属'+res.value.data.cookies.sx+'，'+res.value.data.info.nayin[0].layin+'命。日主天干为'+res.value.data.info.nayin[0].layin+res.value.data.cookies.bazi[4]+'，生于'+res.value.data.cookies.siji+'季。';

    //  <td><{$return.user.bazi.0}></td>
    //           <td><{$return.user.bazi.2}></td>
    //           <td><{$return.user.bazi.4}></td>
    //           <td><{$return.user.bazi.6}></td></tr>
    items.value = [{
        bz:'天干',
        nz: res.value.data.return.user.bazi[0],
        yz: res.value.data.return.user.bazi[2],
        rz: res.value.data.return.user.bazi[4],
        sz: res.value.data.return.user.bazi[6],
        class: 'bg-[#fcf5e5]'
        }, {
        bz: '地支',
        nz: res.value.data.return.user.bazi[1],
        yz: res.value.data.return.user.bazi[3],
        rz: res.value.data.return.user.bazi[5],
        sz: res.value.data.return.user.bazi[7],
        class: 'bg-[#eedec7]'
    }]

    lnys.value = res.value.data.return.sx.yf;

    rglm.value = res.value.data.rglm;
    // console.log(rglm.value)
    // console.log(rglm.value)
    tywh.value = res.value.data.info.tywh;

    myq_text.value = res.value.data.myq_text;
}

onMounted(() => {
  getResult();
});

</script>

<template>
  <div class="w-full min-h-screen relative">
    <Header :back="'/yunshi'" />
    <!-- 自适应背景图 -->
    <img 
      src="/assets/images/yunshi/result.png" 
      alt=""
      class="w-full h-auto object-contain"
    />
    <div class="absolute top-[1%] w-full">
        <img 
        src="/assets/images/yunshi/nidexinxi.png" 
        alt=""
        class="w-full h-auto object-contain"
        />
        <img 
        src="/assets/images/yunshi/avatar.png" 
        alt=""
        class="absolute top-[40%] left-[10%] w-[20%] h-auto object-contain"
        />
        <div class="absolute top-[35%] left-[35%] text-size-xl font-bold text-black">姓名：</div>
        <div class="absolute top-[37%] text-[#a48355] w-full">
            <!-- 每行单独控制左边距 -->
            <div class="ml-[50%] text-size-1xl">{{ username }}</div>
        </div>
        <div class="absolute top-[50%] left-[35%] text-size-xl font-bold text-black">性别：</div>
        <div class="absolute top-[52%] text-[#a48355] w-full">
            <!-- 每行单独控制左边距 -->
            <div class="ml-[50%] text-size-1xl">{{ sex }}</div>
        </div>
        <div class="absolute top-[65%] left-[35%] text-size-xl font-bold text-black">出生：</div>
        <div class="absolute top-[67%] text-[#a48355] w-full">
            <!-- 每行单独控制左边距 -->
            <div class="ml-[50%] text-size-1xl">{{ birthday }}</div>
        </div>
    </div>
    <div class="absolute top-[4%] w-full">
        <img 
        src="/assets/images/yunshi/wxbz.png" 
        alt=""
        class="w-full h-auto object-contain relative"
        />
        <UTable :ui="{td:{padding:'py-2'}, thead:'border-none', tr:{base:'border-none'}}" :rows="items" :columns="columns" class="absolute top-[23%] left-0 right-0 mx-auto w-[93%]">
            <template #quantity-data="{ row }">
                {{ row.quantity.value }}
            </template>
        </UTable>
        <div class="absolute bottom-[8%] ml-[10%] mr-[10%] text-black">
          {{wxbzzl}}
        </div>
    </div>
    <div class="absolute top-[8%] w-full">
        <div class="flex flex-col relative">
            <img 
            src="/assets/images/yunshi/lnyc.png" 
            alt=""
            class="w-[55%] left-0 right-0 mx-auto h-auto object-contain relative mb-3 mt-3"
            />
            <div class="rounded-md w-[90%] left-0 right-0 mx-auto bg-[#fbf6e4] pt-5 pb-5">
                <div v-for="(v, index) in lnys" :key="index">
                    <div class="text-center text-[#ec6337] font-bold mb-3 mt-5">{{v.toubu2}}</div>
                    <div class="ml-[10%] mr-[10%]">
                        <p class="indent-8 text-black">{{v.liunian}}</p>
                    </div>
                </div>
            </div>
            <img 
            src="/assets/images/yunshi/lyyc.png" 
            alt=""
            class="w-[55%] left-0 right-0 mx-auto h-auto object-contain relative mb-3 mt-3"
            />
            <div class="rounded-md w-[90%] left-0 right-0 mx-auto bg-[#fbf6e4] pt-5 pb-5">
                <div v-for="(v, index) in lnys" :key="index">
                    <div class="text-center text-[#ec6337] font-bold mb-3 mt-5">{{v.toubu}}</div>
                    <div class="ml-[10%] mr-[10%]">
                        <p class="indent-8 text-black">{{v.neirong}}</p>
                    </div>
                </div>
            </div>
            <img 
            src="/assets/images/yunshi/zssy.png" 
            alt=""
            class="w-[55%] left-0 right-0 mx-auto h-auto object-contain relative mb-3 mt-3"
            />
            <div class="rounded-md w-[90%] left-0 right-0 mx-auto bg-[#fbf6e4] pt-5 pb-5">
                <!-- <div class="text-center text-[#ec6337] font-bold mb-3 mt-5">终生事业分析</div> -->
                <div class="ml-[10%] mr-[10%]">
                    <p class="indent-8 text-black" v-html="rglm?.syfx"></p>
                </div>
                <div class="text-center text-[#ec6337] font-bold mb-3 mt-5">适合的行业</div>
                <div class="ml-[10%] mr-[10%]">
                    <p class="indent-8 text-black" v-html="tywh?.hyhw"></p>
                </div>
            </div>
            <img 
            src="/assets/images/yunshi/zscf.png" 
            alt=""
            class="w-[55%] left-0 right-0 mx-auto h-auto object-contain relative mb-3 mt-3"
            />
            <div class="rounded-md w-[90%] left-0 right-0 mx-auto bg-[#fbf6e4] pt-5 pb-5">
                <!-- <div class="text-center text-[#ec6337] font-bold mb-3 mt-5">终生财富分析</div> -->
                <div class="ml-[10%] mr-[10%]">
                    <p class="indent-8 text-black" v-html="rglm?.cyfx"></p>
                </div>
            </div>
            <img 
            src="/assets/images/yunshi/zsaq.png" 
            alt=""
            class="w-[55%] left-0 right-0 mx-auto h-auto object-contain relative mb-3 mt-3"
            />
            <div class="rounded-md w-[90%] left-0 right-0 mx-auto bg-[#fbf6e4] pt-5 pb-5">
                <!-- <div class="text-center text-[#ec6337] font-bold mb-3 mt-5">终生爱情分析</div> -->
                <div class="ml-[10%] mr-[10%]">
                    <p class="indent-8 text-black" v-html="rglm?.aqfx"></p>
                </div>
            </div>
            <img 
            src="/assets/images/yunshi/wlynys.png" 
            alt=""
            class="w-[55%] left-0 right-0 mx-auto h-auto object-contain relative mb-3 mt-3"
            />
            <div class="rounded-md w-[90%] left-0 right-0 mx-auto bg-[#fbf6e4] pt-5 pb-5">
                <!-- <div class="text-center text-[#ec6337] font-bold mb-3 mt-5">未来一年运势分析</div> -->
                <div class="ml-[10%] mr-[10%]">
                    <p class="indent-8 text-black" v-html="myq_text"></p>
                </div>
            </div>
        </div>
    </div>
    
  </div>
</template>
